<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="StyleSheet" href="/css/bootstrap.min.css" type="text/css" media="screen" />
    <!--  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"-->
<!--        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">-->
  <link rel="stylesheet" href="/css/pet-store-plus.css">
    <link rel="stylesheet" href="/css/staticfilebootstrap.min.css">
<!--  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
<!--  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->
    <script src="/js/chart.js"></script>
  <script src="/js/jquery-3.6.0.min.js"></script>
<!--  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
  <title>添加商品</title>

</head>
<body>
<div th:replace="seller_commom"></div>

<div class="content" id="content">
  <p class="text-left" style="font-size: x-large;margin-top: 30px;">添加商品</p>
  <ul class="navbar" id="addType" style="grid-column: span 3">
    <li><a class="active" id="category" onclick="showTable('AddCategoryForm',this)">Category</a></li>
    <li><a  id="pending_orders" onclick="showTable('AddProductForm',this)">Product</a></li>
    <li><a id="shipped_orders" onclick="showTable('AddItemForm',this)">Item</a></li>
  </ul>
  <div style="grid-row: span 1;grid-column: span 2"></div>
  <div style="grid-row: span 1;grid-column: span 2"></div>

  <form id="AddCategoryForm"  action='/admin/addCategory' method="post" enctype="multipart/form-data" style="align-content: center;display: inline-block" >
      <table class="AddTab" id="categoryTable" >
      <tr>
        <td> <label for="name">Name:&emsp;&emsp;&emsp;</label></td>
        <td> <input type="text" id="name2" name="name" required class="item-input"></td>
      </tr>
      <tr>
        <td><label for="pic">图片:&emsp;&emsp;&emsp;</label></td>
        <td>
          <div class="image-upload-container">
<!--            <input type="file" id="pic" accept="image/*" name="pic">-->
            <input type="file" id="pic" accept="image/*" name="pic" onchange="previewImage(event)">
            <label for="pic" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">+</label>
            <img id="imagePreview2" class="image-preview" src="" alt="Image Preview">
          </div>
          <script>
            function previewImage(event) {
              var input = event.target;
              var preview = document.getElementById('imagePreview2');

              if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                  preview.src = e.target.result;
                  console.log(preview.src);
                    preview.style.display = 'block'; // 在if语句块中显示预览图片
                }
                reader.readAsDataURL(input.files[0]);
              }
            }
          </script>
        </td>
      </tr>
    </table>
    <button class="Button2" style="display: inline-block;" onclick="window.location.href='/admin/Category'" type="button">取消</button>
    <button class="Button" style="display: inline-block; width:30%;height:50px;font-size: x-large;margin-left: 90px;" type="submit">确定</button>
</form>

    <form id="AddProductForm" action="/admin/addProduct" method="post" style="align-content: center;display: none">
      <table class="AddTab" id="productTable">
        <tr>
          <td><label for="id">ProductId:&emsp;&emsp;&emsp;</label></td>
          <td><input type="text" id="id" name="id" required class="item-input"></td>
        </tr>
        <tr>
          <td> <label for="name">Name:&emsp;&emsp;&emsp;</label></td>
          <td> <input type="text" id="name" name="name" required class="item-input"></td>
        </tr>
        <tr>
          <td><label style="font-size: xx-large">Category:&emsp;&emsp;&emsp;</label></td>
          <td><div class="addItem-select" id="p-category-select" style="width:100%;height:60px">
          </div></td>
        </tr>
        <tr>
          <td><label for="id">图片:&emsp;&emsp;&emsp;</label></td>
          <td>
          <div class="image-upload-container">
            <input type="file" id="imageInput1" accept="image/*" name="pic" onchange="previewImage1(event)">
            <label for="imageInput1" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">+</label>
            <img id="imagePreview1" class="image-preview" src="" alt="Image Preview" >
          </div>
          </td>
        </tr>

      </table>
    <button class="Button2" style="display: inline-block;"  onclick="window.location.href='/admin/Product1'" type="button">取消</button>
    <button class="Button" style="display: inline-block; width:30%;height:50px;font-size: x-large;margin-left: 90px;" type="submit">确定</button>
</form>

    <form id="AddItemForm" action='/admin/addItem' method="post" style="align-content: center ;display: none">
      <table class="AddTab" id="itemTable" >
        <tr>
          <td><label style="font-size: xx-large">Category:&emsp;&emsp;&emsp;</label></td>
          <td><div class="addItem-select" id="item-category-select" style="width:100%;height:60px">
          </div></td>
        </tr>

        <tr>
          <td><label style="font-size: xx-large">ProductId:&emsp;&emsp;&emsp;</label></td>
          <td><div class="addItem-select" id="item-productid-select" style="width:100%;height:60px">
          </div></td>
        </tr>
        <tr>
          <td> <label for="name">ItemId:&emsp;&emsp;&emsp;</label></td>
          <td> <input type="text" id="name3" name="name" required class="item-input"></td>
        </tr>
    <tr>
      <td> <label for="price">ListPrice:&emsp;&emsp;&emsp;</label></td>
      <td> <input type="text" id="price" name="price" required class="item-input"></td>
    </tr>
    <tr>
      <td> <label for="qty">库存:&emsp;&emsp;&emsp;</label></td>
      <td> <input type="text" id="qty" name="qty" required class="item-input"></td>
    </tr>
    <tr>
      <td> <label for="attr">Attr:&emsp;&emsp;&emsp;</label></td>
      <td> <textarea type="text" id="attr" name="cost" required class="item-input"> </textarea></td>
    </tr>


  </table>
    <button class="Button2" style="display: inline-block;" onclick="window.location.href='/admin/showItem'" type="button">取消</button>
    <button class="Button" style="display: inline-block; width:30%;height:50px;font-size: x-large;margin-left: 90px;" type="submit">确定</button>
  </form>
    <div style="grid-row: span 1;grid-column: span 2"></div>
    <div style="grid-row: span 1;grid-column: span 2"></div>
    <div style="grid-row:span 1;grid-column:span 1 ">
        <p class="errorMsg" th:if="${errorMsg}" th:text="${errorMsg}" style="color: red;"></p>
    </div>
  <script th:inline="javascript">

    var mapData;
    function showTable(formId, element) {
      // 隐藏所有表格及错误信息
      var forms = document.querySelectorAll('form');
      var url;
        var errorMsgElement = document.querySelector('.errorMsg');
        if(errorMsgElement){
            errorMsgElement.style.display = 'none'; // 隐藏段落元素
            console.log('yes');
        }else {
            console.log('no');
        }
        // 检查段落元素是否显示
        if (errorMsgElement) {
            var isDisplayed = errorMsgElement.style.display !== 'none';

            if (isDisplayed) {
                console.log('段落元素可见');
            } else {
                console.log('段落元素隐藏');
            }
        } else {
            console.log('找不到包含错误信息的段落元素');
        }


      forms.forEach(function(table) {
        table.style.display = 'none';
      });

      console.log(formId);
      // 显示指定的表格
      var tableToShow = document.getElementById(formId);
      document.getElementById(formId).style='display: inline-block;';
      //传URL
      if (tableToShow) {
        tableToShow.style.display = '';
      }
      if(formId=='AddProductForm'){
         url = '/admin/product';

      }
      else if(formId=='AddCategoryForm'){
        url = '/admin/category';
      }
      else if(formId=='AddItemForm'){
        url='/admin/item';
      }
      console.log('url='+url);
      if(url==='/admin/product'||url==='/admin/item') {
        $.ajax({
          url: url,
          type: 'GET',
          success: function (d) {
            console.log('seccess');
              if(url==='/admin/product') {
                  // $('#someElement').text(data.someValue); // 假设data中有一个名为someValue的属性
                  console.log(d.data);
                  // var selectList = $('#pro-category');
                  var selectInnerHTML = "<select name='category'>";
                  // selectList.empty(); // 清空下拉列表
                  for (var i = 0; i < d.data.length; i++) {
                      selectInnerHTML += "<option value='" + d.data[i].catid + "'>" + d.data[i].catid + "</option>";
                  }

                  document.getElementById("p-category-select").innerHTML = selectInnerHTML;
              }else if(url==='/admin/item'){
                  console.log(d);
                  console.log(d.data);
                  const keys = Object.keys(d.data);
                  mapData=d.data;
                  console.log(keys); // 输出 ["CATS", "DOGS", "FISH", "REPTILES", "BIRDS"]
                  var selectInnerHTML = "<select id='i-categoryselect' name='category' onchange='updateProductOptions()'>";
                  keys.forEach((category) => {
                      selectInnerHTML += "<option value='" + category+ "'>" + category + "</option>";
                  });
                  document.getElementById("item-category-select").innerHTML = selectInnerHTML;
                  document.getElementById("i-categoryselect").selectedIndex = -1;

              }
              console.log('999');


          },
          error: function () {
            console.log('fail');
            // 处理错误情况
          }
        });
      }
        var navbarItems = document.querySelectorAll('#addType a');

        console.log('navbarItems='+navbarItems)
        navbarItems.forEach(function(item) {
            navbarItems.forEach(function(navItem) {
                navItem.classList.remove('active');
            });
        });
        element.classList.add('active');

    }

    function updateProductOptions() {
      // 获取第一个 select 的值
      var select1Value = document.getElementById("i-categoryselect").value;
      var selectInnerHTML2="<select id='i-productselect' name='pid'>";
      var selectedValues = mapData[select1Value];
      console.log('selectedValues= '+selectedValues);
      selectedValues.forEach((pid)=>{
         selectInnerHTML2+="<option value='" + pid+ "'>" + pid + "</option>";
      });
      document.getElementById('item-productid-select').innerHTML=selectInnerHTML2;
      document.getElementById('item-productid-select').selectedIndex=-1;
    }

    function previewImage1(event) {
        var input = event.target;
        var preview = document.getElementById('imagePreview1');
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                console.log(preview.src);
                preview.style.display = 'block'; // 在if语句块中显示预览图片
            }
            reader.readAsDataURL(input.files[0]);
        }
    }






  </script>
</div>
</body>
</html>